<div class="mainPage">

    <div style="margin:0 1%">
        <div class="gutter-example">
            <div nz-row [nzGutter]="8">
                <div nz-col class="gutter-row" [nzSpan]="12">
                    <nz-card style="width:100%;max-height: 380px;">
                        <ng-template #title>
                            本辖区维保单位数量及分布情况
                        </ng-template>
                        <ng-template #body>
                                <h3>辖区维保单位总数：{{maintNum}}</h3>
                                <div echarts *ngIf="option1.title" [options]="option1"></div>
                            
                        </ng-template>
                    </nz-card>
                </div>
                <div nz-col class="gutter-row" [nzSpan]="12">
                    <nz-card style="width:100%;max-height: 380px;">
                        <ng-template #title>
                                本辖区使用单位数量及分布情况
                        </ng-template>
                        
                        <ng-template #body>
                            <h3>辖区使用单位总数：{{usedNum}}</h3>
                            <div echarts *ngIf="option2.title" [options]="option2"></div>
                            
                        </ng-template>
                    </nz-card>
                </div>
            </div>
        </div>
    </div>

 

    <div style="margin:1%">
        <div class="gutter-example">
            <div nz-row [nzGutter]="8">
                <div nz-col class="gutter-row" [nzSpan]="12">
                    <nz-card style="width:100%;max-height: 380px;">
                        <ng-template #title>
                            本辖区维保单位资质人员数量
                        </ng-template>
                        <ng-template #body>
                                <h3>辖区维保单位资质人员总数：{{maintCzryTotal}}</h3>
                                <div echarts *ngIf="option4.title" [options]="option4"></div>
                            
                        </ng-template>
                    </nz-card>
                </div>
                <div nz-col class="gutter-row" [nzSpan]="12">
                    <nz-card style="width:100%;max-height: 380px;">
                        <ng-template #title>
                            本辖区使用单位资质人员数量
                        </ng-template>
                        
                        <ng-template #body>
                            <h3>辖区使用单位资质人员总数：{{usedCzryTotal}}</h3>
                            <div echarts *ngIf="option5.title" [options]="option5"></div>
                            
                        </ng-template>
                    </nz-card>
                </div>
            </div>
        </div>
    </div>

    <div style="margin:1%">
        <div class="gutter-example">
            <div nz-row [nzGutter]="8">
                <div nz-col class="gutter-row" [nzSpan]="12">
                    <nz-card style="width:100%;max-height: 380px;">
                        <ng-template #title>
                            本辖区各星级维保单位数量
                        </ng-template>
                        <ng-template #body>
                                <div echarts *ngIf="option7.title" [options]="option7"></div>
                        </ng-template>
                    </nz-card>
                </div>

                <div nz-col class="gutter-row" [nzSpan]="12">
                    <nz-card style="width:100%;max-height: 380px;">
                        <ng-template #title>
                            本辖区各资质维保单位数量
                        </ng-template>
                        <ng-template #body>
                                <div echarts *ngIf="option8.title" [options]="option8"></div>
                        </ng-template>
                    </nz-card>
                </div>
                
            </div>
        </div>
    </div>

    <div style="margin:1%">
        <div class="gutter-example">
            <div nz-row [nzGutter]="8">


                <div nz-col class="gutter-row" [nzSpan]="12">
                    <nz-card style="width:100%;max-height: 380px;">
                        <ng-template #title>
                            本辖区各资质使用单位数量
                        </ng-template>
                        <ng-template #body>
                                <div echarts *ngIf="option6.title" [options]="option6"></div>
                        </ng-template>
                    </nz-card>
                </div>
                
            </div>
        </div>
    </div>
    
</div>